<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画版下拉菜单</title>
</head>
<script src="./jquery-3.2.1.min.js"></script>
<body>
    <div class="wrap">
        <ul>
        	<li>
        	    <span>一级菜单1</span>
        	        <ul>
        	            <li><a href="javascript:void(0);">二级菜单1</a></li>
        	            <li><a href="javascript:void(0);">二级菜单2</a></li>
        	            <li><a href="javascript:void(0);">二级菜单3</a></li>
        	        </ul>
        	</li>
        	<li>
    	        <a href="javascript:void(0);">一级菜单1</a>
        	        <ul>
        	            <li><a href="javascript:void(0);">二级菜单1</a></li>
        	            <li><a href="javascript:void(0);">二级菜单2</a></li>
        	            <li><a href="javascript:void(0);">二级菜单3</a></li>
        	        </ul>
        	</li>
        	<li>
        	    <a href="javascript:void(0);">一级菜单1</a>
        	        <ul>
        	            <li><a href="javascript:void(0);">二级菜单1</a></li>
        	            <li><a href="javascript:void(0);">二级菜单2</a></li>
        	            <li><a href="javascript:void(0);">二级菜单3</a></li>
        	        </ul>
        	</li>
        </ul>
    </div>
        	<script>
        	  $(function () {
        	    $('.wrap>ul>li').mouseenter(function () {
    	      $(this).children('ul').stop().slideDown(300);
        	    });
        	    $('.wrap>ul>li').mouseleave(function () {
        	      $(this).find('ul').stop().slideUp(50);
        	    });
        	  });
        	</script>
       
</body>
</html>